<template>
  <div>
    <UploadFile action-url="/api/file/oss/upload" :initial-value="form.fileList" :isOnlyButton="true" :limit="10000" @change="successHandler">上传附件</UploadFile>

    <FilterTable
      ref="table"
      :columns="columns"
      columnsRef="whbydUploadFile"
      :isSelectColumn="false"
      :onColumnsChange="columns => (this.columns = columns)"
      :height="300"
      :dataSource="list"
      :onSyncTableData="syncTableFun"
    />

    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <el-button @click="closeDrawer(1)">关 闭</el-button>
      <multiuse-button type="primary" :click="closeDrawer.bind(this, 2)">保存</multiuse-button>
    </div>
  </div>
</template>
<script>
import { getPictureTypeList, setFile, deleteFile } from '@/api/repair/otherBusiness/maintainPDI/index';
import moment from 'moment';
export default {
  props: ['type', 'fileList', 'emitData'],
  data() {
    this.saveData = null;
    this.table = null;
    return {
      form: {
        fileList: []
      },
      list: [],
      syncList: [],
      columns: this.createdTable()
    };
  },
  created() {
    this.getPictureTypeList();
  },
  mounted() {
    this.table = this.$refs.table.$refs.pageTable;
    if (this.fileList.length > 0) {
      this.table.EXECUTE_INSERT(this.fileList);
    }
  },
  methods: {
    createdTable() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          fixed: 'left',
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 70,
          render: (props, h) => {
            return (
              <div>
                <el-button size="mini" type="text" onClick={() => this.delFun(props.row)}>
                  删除
                </el-button>
              </div>
            );
          }
        },
        {
          title: '附件标题',
          dataIndex: 'fileDesc',
          showOverflowTooltip: true
        },
        {
          title: '上传日期',
          dataIndex: 'createdAt'
        },
        {
          title: '附件类型',
          dataIndex: 'imageType',
          editType: 'select',
          editItems: [],
          editable: true,
          defaultEditable: true,
          rules: [{ required: true, message: '请选择附件类型', trigger: 'change' }]
        },
        {
          title: '备注',
          dataIndex: 'fileRemark',
          editable: true,
          defaultEditable: true,
          editType: 'text'
        },
        {
          title: '文件服务器地址',
          dataIndex: 'fileUrl',
          hidden: true
        }
      ];
    },
    // 表格变化回调
    syncTableFun(val) {
      this.syncList = val;
    },
    // 上传成功回调
    successHandler(val) {
      let json = JSON.parse(JSON.stringify(val));
      let data = {};
      data.createdAt = moment().format('YYYY-MM-DD HH:mm:ss');
      data.fileDesc = json[json.length - 1].name;
      data.fileUrl = json[json.length - 1].url;
      this.table.EXECUTE_INSERT(data);
    },
    // 关闭
    async closeDrawer(type) {
      if (type == 1) {
        this.$emit('close');
      } else {
        for (let i = 0; i < this.syncList.length; i++) {
          if (!this.syncList[i].imageType || this.syncList[i].imageType == '') {
            this.$notify({
              title: '提示',
              message: '第' + (i + 1) + '行附件类型不能为空',
              type: 'warning'
            });
            return;
          }
        }
        if (this.type == 1) {
          this.$emit('addChange', this.syncList);
        } else {
          this.$emit('addChange', this.syncList);
          // let id = this.emitData.id;
          // let no = this.emitData.billNo;
          // let list = this.syncList || [];
          // let uuid = this.emitData.uuid;
          // let res = await setFile({ parentId: id, fileList: list, billNo: no, uuId: uuid });
          // if (res.resultCode == 200) {
          //   this.$notify({
          //     title: '成功',
          //     message: '保存成功',
          //     type: 'success'
          //   });
          //   this.$emit('addChange', this.syncList);
          // }
        }
      }
    },
    // 删除
    delFun(row) {
      if (row.id) {
        deleteFile(row.id).then(res => {
          this.table.EXECUTE_DELETE([row]);
        });
      } else {
        this.table.EXECUTE_DELETE([row]);
      }
    },
    // 获取图片类型列表
    async getPictureTypeList() {
      let res = await getPictureTypeList();
      let pictureTypeList = res.data.map(x => ({ text: x.pictureTypeName, value: x.pictureTypeCode }));
      this.columns.find(item => item.dataIndex === 'imageType').editItems = pictureTypeList;
    }
  }
};
</script>
